<template>
  <div>
    <div id="myChart" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <div id="main3" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
// 引入基本模板
import echarts from 'echarts'
export default {
  name: 'EChartsDemo',
  comments: {
  },
  data () {
    return {
    }
  },
  mounted () {
    this.drawLine()
    this.drawPie()
    this.drawNormalPie()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '柱状图' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    },
    drawPie () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption({
        title: { text: '南丁格尔图' },
        tooltip: {},
        series: [{
          name: '访问来源',
          type: 'pie', // 饼图
          roseType: 'angle', // 南丁格尔图
          radius: '55%',
          data: [{
            value: 235,
            name: '视频广告'
          },
          {
            value: 274,
            name: '联盟广告'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 400,
            name: '搜索引擎'
          }
          ]
        }],
        // 设置阴影
        itemStyle: {
          // 阴影的大小
          shadowBlur: 200,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          // 鼠标点聚焦高亮
          emphasis: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      })
    },
    drawNormalPie () {
      // 基于准备好的dom，初始化echarts实例
      var myChart3 = echarts.init(document.getElementById('main3'))
      var demoData = [
        {
          'category_code': '123',
          'category_name': '123',
          'total': 1
        },
        {
          'category_code': '123',
          'category_name': '重负荷柴油机油3',
          'total': 1
        },
        {
          'category_code': 'book',
          'category_name': '书籍',
          'total': 4
        },
        {
          'category_code': 'cjy',
          'category_name': '日杂',
          'total': 1
        },
        {
          'category_code': 'cjy',
          'category_name': '重负荷柴油机油-x',
          'total': 1
        },
        {
          'category_code': 'cjy1',
          'category_name': '柴机油1',
          'total': 1
        },
        {
          'category_code': 'gcjx',
          'category_name': '纸巾',
          'total': 1
        },
        {
          'category_code': 'gyy',
          'category_name': '鞋靴',
          'total': 1
        },
        {
          'category_code': 'ljx',
          'category_name': '玩具',
          'total': 1
        },
        {
          'category_code': 'rqzyy',
          'category_name': '衣服',
          'total': 1
        },
        {
          'category_code': 'sjtx',
          'category_name': '手机',
          'total': 6
        },
        {
          'category_code': 'yyy',
          'category_name': '洗浴',
          'total': 1
        },
        {
          'category_code': 'yyy',
          'category_name': '清洁',
          'total': 1
        },
        {
          'category_code': 'zdpdy',
          'category_name': '箱包',
          'total': 1
        }
      ]
      var legendData = []
      var seriesData = []
      for (let index in demoData) {
        legendData.push(demoData[index].category_name)
        seriesData.push({
          name: demoData[index].category_name,
          value: demoData[index].total
        })
      }
      var option = {
        title: {
          text: '所有类别数量',
          subtext: '纯属虚构测试数据',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>总数 : {c}<br/>占比 : {d}%'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: legendData
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548
                }
              }
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        series: [
          {
            name: '类别',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: seriesData
          }
        ]
      }
      myChart3.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
